<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <!--
    浮动分为左浮动  右浮动  清除浮动

    特点：
    1、向你指定的方向移动，并且让出空间
    2、如果后面的元素也是浮动的，那么后面的元素就会在碰到前面的浮动的元素或者边框时，就定位在那里
    3、如果后面的元素没有浮动，则该元素就会在浮动的元素的下面
    -->
    <style type="text/css">
        *{
            margin:0px;
            padding:0px;
        }
        body{
            width:278px;
            border:1px solid pink;
            height:600px;
            margin:20px;
        }
        /*
        行内元素可以浮动，浮动后具有块元素的特点
        */
        div,span{
            width:120px;
            height:80px;
            background-color: magenta;
            border:1px solid black;
            margin:8px;
            /*浮动*/
            float:left;
        }
        span{
            background-color: silver;
        }
    </style>
</head>
<body>
<div>div1</div>
<div>div2</div>
<div>div3</div>
<!--行元素是否可以浮动-->
<span>span1</span>
<span>span2</span>
</body>
</html>